<template>
    <Center>
        <div class="p-10">
            <div class="text-center text-3xl mt-10 text-gray-800" style="letter-spacing: 0.2em;">歌单推荐</div>
            <div class="mt-5 flex justify-center">
                <div class="flex flex-row text-gray-500" style="width:800px;">
                    <div class="text-center basis-1/5 pointer" v-for="(item, index) in tagList"
                        @click="selNewSongTag(item, index)">{{ item.name }}</div>
                </div>
            </div>
            <div class="mt-5">
                <el-row>
                    <el-col :span="6" class="pl-10 pr-10 pt-5 pb-5" v-for="(item, index) in songsList">
                        <el-image :src="baseUrl + item.image" class=" rounded-xl" style="width:100%;height:220px;" />
                        <div class=" mt-2 font-bold text-gray-700">{{ item.title }}</div>
                        <div class=" mt-1 text-sm text-gray-500">播放量：{{ item.views }}</div>
                    </el-col>
                </el-row>
            </div>
            <div class="mt-5 text-2xl font-bold">
                <el-space :size="30">
                    <span class=" text-blue-500" @click="selNewHotSong(1)">精彩推荐</span>
                    <span class=" text-gray-500" @click="selNewHotSong(2)">热门推荐</span>
                </el-space>
            </div>
            <el-row class="mt-5">
                <el-col :span="12" class="pr-3" v-for="(item, index) in hotSongsListData">
                    <el-image :src="baseUrl + item.rimage" />
                </el-col>
            </el-row>
        </div>
        <div class="p-4">
            <el-row>
                <el-col :span="4" class="p-4" v-for="(item, index) in getSongsTabListData.data">
                    <div>
                        <el-image :src="baseUrl + item.image" class="rounded" style="width:100%;height:160px;" />
                    </div>
                    <div class="mt-2 text-gray-500 text-center">{{ item.title }}</div>
                </el-col>
                
            </el-row>
        </div>
    </Center>
</template>
<script setup>
import test from "@/assets/imgs/1.webp";
import Center from '../../components/common/Center.vue'
import { tagIndex, indexHotPopula, hotSongsList ,songsIndex} from "@/http/api";
import { ref, computed, onMounted, watch } from "vue";
const baseUrl = import.meta.env.VITE_API_URL;

const tagList = ref([]);
const songsList = ref([]);
const hotSongsListData = ref([]);
const getSongsTabListData = ref([]);
onMounted(() => {
    getTagList();
    getSongsList();
    getHotSongList();
    getSongsTabList();
});

const getSongsTabList = async () => {
    const { data } = await songsIndex({
        limit: 30,
    });
    console.log(data);
    getSongsTabListData.value = data.songs;
}
const getHotSongList = async () => {
    const { data } = await hotSongsList({
        recommend: 1,
        limit: 2,
    });
    hotSongsListData.value = data.songs;
};
const selNewHotSong = async (e) => {
    const { data } = await hotSongsList({
        recommend: e,
        limit: 2,
    });
    hotSongsListData.value = data.songs;
};


const getTagList = async () => {
    const { data } = await tagIndex({
    });
    tagList.value = data.tag;
};

const getSongsList = async () => {
    const { data } = await indexHotPopula({
        limit: 4,
    });
    songsList.value = data.data;
};

const selNewSongTag = async (e) => {
    const { data } = await indexHotPopula({
        tag: e.id,
        limit: 4,
    });
    songsList.value = data.data;
}
</script>
<style scoped>
.container {
    width: 1440px;
}
</style>